<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight:bold;color:#1890FF;font-size:14px;">数据集</span>
      </div>
      <div v-if="dataset!=null">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="名称" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            {{ dataset.name }}
          </el-descriptions-item>
          <el-descriptions-item label="编码" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            {{ dataset.code }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            {{ dataset.creator }}
          </el-descriptions-item>
          <el-descriptions-item label="创建日期" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            {{ parseTime(dataset.createTime, '{y}-{m}-{d}') }}
          </el-descriptions-item>
          <el-descriptions-item label="部门" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            {{ dataset.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="状态" :labelStyle="{width:'10%','text-align': 'center'}"
            :contentStyle="{ width:'40%',color: '#329dff' }">
            <span v-if="dataset.status==1" style="color:green">已发布</span>
            <span v-if="dataset.status==2" style="color:blue">未发布</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card style="margin-top:10px;">
      <div slot="header" class="clearfix">
        <span style="font-weight:bold;color:#1890FF;font-size:14px;">数据目录配置</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div style="float:left;">
            <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" plain @click="editCatagory">管理数据目录</el-button>
            <el-button type="danger" size="mini" icon="el-icon-s-promotion" plain @click="backToDataset">回到数据集管理</el-button>
          </div>
        </el-col>
      </el-row>

      <el-card style="margin-top:20px;">
        <el-table ref="multipleTable" :data="menuList" :row-key="getRowKeys" @selection-change="handleSelectionChange" border >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="name" label="目录名称" ></el-table-column>
          <el-table-column prop="code" label="目录编码" ></el-table-column>
          <el-table-column prop="dataType" label="数据类型">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sy_catagory_type" :value="scope.row.dataType"/>
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" label="排序" width="100"></el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1" style="color:green">在用</span>
              <span v-if="scope.row.status==2" style="color:blue">停用</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建人" align="center" width="100"></el-table-column>
          <el-table-column label="创建日期" align="center" prop="createTime" width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-row>
        <el-col :span="24">
          <div style="float:right;margin-top:20px;">
            <el-button type="primary" plain @click="saveDatasetCatagory">保存配置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { listCatagoryDataEffect,saveDatasetCatagory } from "@/api/system/catagory";

export default {
  name: "DatasetCatagory",
  dicts: ['sys_dataset_status', 'sy_catagory_type', 'sy_catagory_status'],
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      showSearch: false,
      dataset: {},
      menuList: [],
      // 查询参数
      queryParams: {
        name: null,
        dataType: null,
        code: null,
        datasetId: null,
      },
      // 是否展开，默认全部折叠
      isExpandAll: false,
      // 重新渲染表格状态
      refreshTable: true,
    };
  },
  created() {
    this.dataset = this.$route.query.dataset;
    this.getList();
  },
  methods: {
    backToDataset(){
      const obj = { path: "/datasetcatagory",name: "数据集数据目录配置"};
      this.$tab.closePage(obj).then(() => {
        this.$router.push({
          path: "/dataset",
          query: {
            dataset:this.dataset
          }
        });
      })
    },
    saveDatasetCatagory(){
      let data  = {
        datasetId: this.dataset.uuid,
        datasetIds: this.ids.join(",")
      }
      saveDatasetCatagory(data).then(res =>{
        this.$modal.msgSuccess("保存成功");
        this.getList();
      })
    },
    getRowKeys(row) {
      return row.uuid;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.uuid)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    getList() {
      this.queryParams.datasetId = this.dataset.uuid;
      listCatagoryDataEffect(this.queryParams).then(res => {
        this.menuList = res.data;
        if(this.$refs.multipleTable != undefined){
          this.$nextTick(() => {
            this.$refs.multipleTable.clearSelection();
            if (this.menuList) {
              //再遍历数组，将数据放入方法中
              this.menuList.forEach((row) => {
                if(row.selected===true){
                  this.$refs.multipleTable.toggleRowSelection(row, true)
                  this.ids.push(row);
                }
              })
            }
          });
        }
      });
    },
    editCatagory(){
      const obj = { path: "/datasetcatagory",name: "数据集数据目录配置"};
      this.$tab.closePage(obj).then(() => {
        this.$router.push({
          path: "/catagoryinfo",
          query: {
            dataset:this.dataset
          }
        });
      })
    },
  }
};
</script>
